<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>图书列表</title>
	</head>
	<body>

	<!--图书列表 begin-->
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-md-3" th:each="book:${bookList}">
				<div class="thumbnail">
					<a href="details.html" th:href="@{/book/detail(id=${book.id})}">
						<img th:src="@{'/public/'+ ${book.imgUrl}}" alt="通用的占位符缩略图">
					</a>
					<div class="caption">
						<h3 th:classappend="h3-height" th:text="${book.name}">北纬78°</h3>
						<p th:classappend="p-height">价格:<span th:text="'￥'+${book.newPrice}" style="color:#FA5000">19.5元</span>&nbsp;&nbsp;作者:<span th:text="${book.author}">陈丹燕</span>&nbsp;&nbsp;</p>
						<p>
							<a href="details.html" th:href="@{/book/detail(id=${book.id})}">
								更多信息
							</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--图书列表end-->

	<!--分页begin-->
	<div class="container">
		<div class="row text-center">
			<div class="col-md-12">
				<ul class="pagination">
					<li><a href="javascript:void(0)" th:onclick="loadData(1,[[${pageSize}]],[[${category}]])">首页</a></li>
					<li ><a href="javascript:void(0)" th:style="${cur == 1} ? 'pointer-events:none':''" th:onclick="loadData([[${pre}]],[[${pageSize}]],[[${category}]])">&laquo;</a></li>
					<li th:each="i:${#numbers.sequence(1,pages)}"  th:class="${i == cur} ? 'active':''">
						<a href="javascript:void(0)" th:onclick="loadData([[${i}]],[[${pageSize}]],[[${category}]])" th:text="${i}">2</a>
					</li>
					<li><a href="javascript:void(0)" th:style="${cur == pages} ? 'pointer-events:none':''"  th:onclick="loadData([[${next}]],[[${pageSize}]],[[${category}]])">&raquo;</a></li>
					<li><a href="javascript:void(0)" style="border: 1px solid #ddd;" th:onclick="loadData([[${pages}]],[[${pageSize}]],[[${category}]])">尾页</a></li>
					<li><a style="border: 0px;margin-left: 0px;" th:text="${'当前页'+cur+'/'+pages+'总页'}">当前页3/5总页</a></li>
					<li>

						<div id="search" class="input-group" style="positon:relative;">
							<input id="inputPage" type="text" class="form-control" placeholder="跳转指定页" />
							<span class="input-group-btn">
							            <button class="btn btn-info btn-search" th:onclick="goPage([[${pageSize}]],[[${category}]],[[${pages}]])" >GO</button>
									</span>
						</div>
					</li>
					<li><a style="padding-top: 0px;border: 0px;">
						<label>每页显示:</label>
						<select id="pageSize" th:value="${pageSize}" class="form-control" th:onchange="|loadDataBySize(this)|" style="width: 100px;display: inline;">
							<option value="2" th:selected="${pageSize==2}">2</option>
							<option value="4" th:selected="${pageSize==4}">4</option>
							<option value="6" th:selected="${pageSize==6}">6</option>
							<option value="8" th:selected="${pageSize==8}">8</option>
						</select>
						<label>条</label>
					</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!--分页end-->
	</body>
</html>
